<template>
	<div class="seck">
		<div class="nav_title">
			<h1>活动</h1>
			<p>&nbsp;|&nbsp;Activity</p>
		</div>
		<div class="border_right">
			<div class="conditions">
				<div class="condition1">
					<p>关键字</p>
					<input @keydown.stop="enters22" type="text" v-model.trim="input22" />
				</div>
				<el-select @keydown.native="enters22" v-model="value22" placeholder="支付状态" size="mini" style="width:110px;">
					<el-option v-for="item in option22" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select @keydown.native="enters22" v-model="value25" placeholder="审核状态" size="mini" style="width:110px;">
					<el-option v-for="item in option25" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>						
				<button @keydown.stop="enters22" @click="querys22">查询</button>
				<button @click="clear22">清空</button>		
			</div>					
			<div class="data_lists">					
				<el-table v-loading="loading22" :data="tableData22.data" border style="width:100%;" key="table3">
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column prop="title" label="商品标题" width="110">
						<template slot-scope="scope">
							<span class="titles" v-if="scope.row.prom_data">{{ scope.row.prom_data.title }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="preview_path" label="活动封面" width="80">
						<template slot-scope="scope">
							<img style="max-height:50px;" :src="scope.row.prom_data.face_path" alt="">	
						</template>
					</el-table-column>
					<el-table-column prop="start_time" label="开始时间" width="100">											
					</el-table-column>
					<el-table-column prop="end_time" label="结束时间" width="100">
					</el-table-column>					
					<el-table-column prop="created" label="创建时间" width="100">											
					</el-table-column>
					<el-table-column prop="store_promotion_activitie_title" label="活动标题" width="100">						
					</el-table-column>
					<el-table-column prop="source_from" label="参与类型" width="100">
						<template slot-scope="scope">
							<p v-if="+scope.row.joinType===1">店铺推广</p>
							<p v-if="+scope.row.joinType===2">团购券推广</p>
							<p v-if="+scope.row.joinType===3">商品推广</p>
							<p v-if="+scope.row.joinType===4">红包</p>
						</template>
					</el-table-column>
					<el-table-column prop="audit_msg" label="状态" width="100">
						<template slot-scope="scope">
							<p v-if="scope.row.audit_status===1" style="color:#4492e1;">待审核</p>
							<p v-if="scope.row.audit_status===2" style="color:#24c968;">审核通过</p>
							<p v-if="scope.row.audit_status===3" style="color:#f81623;">审核不通过</p>
							<p v-if="scope.row.audit_status===4" style="color:#f81623;">已删除</p>					
						</template>
					</el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<el-button style="background:#6296ea;font-size:15px;color:#fff;" @click.native="goDetail22(scope.row)">查看详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pages">
				<el-pagination background prev-text="上一页" next-text="下一页" @size-change="handleSizeChange22" @current-change="handleCurrentChange22" :current-page="page22" :page-sizes="[5,10,20]" :page-size="pageSize22" layout="total, sizes, prev, pager, next, jumper" :total="tableData22.count">
				</el-pagination>
			</div>
		</div>

		<!-- 活动详情 -->
		<div class="show_detail" v-if="datas_22">
			<el-dialog title="" top="30px" :visible.sync="dialogVisible_22" width="70%">
				<div class="d_header">
					<h2>{{ datas_22.storeName }}提交的材料</h2>
					<div>						
						<p>木丰账号：{{ datas_22.uid }}</p>												
						<p>审核员：{{ username }}</p>
					</div>
				</div>
				<div class="d_tables">
					<table cellspacing="0" cellpadding="0" border="1" bordercolor="#dfdfdf">						
						<tr>
							<td class="common1">活动id：</td>
							<td class="common1">{{ datas_22.id }}</td>
							<td class="common1">应用号id：</td>
							<td class="common1">{{ datas_22.shop_id }}</td>
						</tr>
						<tr>
							<td class="common1">活动平台：</td>
							<td class="common1">{{ datas_22.platform_name }}</td>							
							<td class="common1">平台活动id：</td>
							<td class="common1">{{ datas_22.store_promotion_activitie_id }}</td>							
						</tr>
						<tr>
							<td class="common1">活动标题：</td>
							<td class="common1">{{ datas_22.store_promotion_activitie_title }}</td>
							<td class="common1">参与活动应用号id：</td>
							<td class="common1">{{ datas_22.itemId }}</td>
						</tr>
						<tr>
							<td class="common1">参与类型：</td>							
							<td class="common1" v-if="+datas_22.joinType===1">店铺推广</td>
							<td class="common1" v-if="+datas_22.joinType===2">团购券推广</td>
							<td class="common1" v-if="+datas_22.joinType===3">商品推广</td>
							<td class="common1" v-if="+datas_22.joinType===4">红包</td>
							<td class="common1">创建时间：</td>
							<td>{{ datas_22.created }}</td>
						</tr>
						<tr>
							<td class="common1">支付状态：</td>
							<td class="common1" v-if="+datas_22.status===0">未支付</td>
							<td class="common1" v-if="+datas_22.status===1">已支付</td>							
							<td class="common1">活动封面：</td>
							<td><img @click="enlarge(21)" class="imgS" :src="datas_22.preview_path" alt="" /></td>
						</tr>
						<tr>
							<td class="common1">参与价格：</td>
							<td class="common1">{{ datas_22.price }}</td>
							<td class="common1">开始时间：</td>
							<td class="common1">{{ datas_22.start_time }}</td>
						</tr>	
						<tr>
							<td class="common1">结束时间：</td>
							<td class="common1">{{ datas_22.end_time }}</td>
							<td class="common1" v-if="datas_22.joinType===1">应用号id：</td>
							<td class="common1" v-if="datas_22.joinType===3">商品id：</td>
							<td class="common1">{{ prom_data.id }}</td>
						</tr>	
						<tr>							
							<td class="common1" v-if="datas_22.joinType===1">应用号名称：</td>
							<td class="common1" v-if="datas_22.joinType===3">商品标题：</td>
							<td class="common1">{{ prom_data.title }}</td>
							<td class="common1">参与活动封面：</td>							
							<td><img @click="enlarge(22)" class="imgS" :src="prom_data.face_path" alt="" /></td>
						</tr>										
					</table>
				</div>
				<div class="d_footer">
					<div class="d_footer_1">审核操作</div>
					<div class="d_footer_2">
						<select v-model="value4_22">
							<option value="1">待审核</option>
							<option value="2">审核通过</option>
							<option value="3">审核不通过</option>
							<option value="4">已删除</option>							
						</select>
						<textarea resize="none" v-model.trim="input4_22">
						</textarea>
					</div>
					<div class="d_footer_3">
						<h3>选择通知方式</h3>
						<el-checkbox-group v-model="checkList_22" style="display:flex;flex-flow:column;">
							<el-checkbox label="1" :disabled="disable1_22">APP通知</el-checkbox>
							<el-checkbox label="3" :disabled="disable2_22">短信通知</el-checkbox>
							<el-checkbox label="2" :disabled="disable3_22">公众号通知</el-checkbox>
						</el-checkbox-group>
					</div>
					<div class="d_footer_4">
						<button @click="submits_22">提交修改</button>
					</div>
				</div>
			</el-dialog>
		</div>
		<!-- 阴影 -->
		<div class="mask" v-if="isMask" @click="closeMask" @mousewheel="larger">
			<p>滚轮控制缩放</p>			
			<img v-if="imgIndex===21" class="mask_img" :src="datas_22.preview_path" alt="" />			
			<img v-if="imgIndex===22" class="mask_img" :src="prom_data.face_path" alt="" />			
		</div>

	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	export default {
		name: 'seck',
		data() {
			return {
				loading22: true,
				tableData22: '',				
				input22: '',
				value22: '',
				option22: [{
					value: '99',
					label: '全部'
				}, {
					value: '0',
					label: '未支付'
				}, {
					value: '1',
					label: '已支付'
				}],								
				value25: '',
				option25: [{
					value: '99',
					label: '全部'
				}, {
					value: '1',
					label: '待审核'
				}, {
					value: '2',
					label: '审核通过'
				}, {
					value: '3',
					label: '审核不通过'
				}, {
					value: '4',
					label: '已删除'
				}],
				username: '',
				page22: 1,
				pageSize22: 5,
				disable1_22: false,
				disable2_22: false,
				disable3_22: false,
				checkList_22: [],
				datas_22: {},
				prom_data: {},
				ID_22: '',
				dialogVisible_22: false,
				value4_22: '',
				input4_22: '',
				flagss_22: true, //重复提交处理
				isMask: false,
				imgIndex: 1,
				scaleNum: 0,				
			}
		},
		components: {

		},
		computed: {

		},
		created() {
            if(!getCookie('UID') || !getCookie('TOKEN')) {
				this.$router.push('/login');
			}
			if(localStorage.getItem('auditUserName')) {
				this.username = localStorage.getItem('auditUserName');
			}			
		},
		mounted() {
            this.lists2();    
		},
		methods: {
            //活动
            lists2() {
				let obj = {};				
				obj.uid = getCookie('UID');
				obj.token = getCookie('TOKEN');
				obj.page = this.page22;
				obj.limit = this.pageSize22;
				obj.key = this.input22;
				obj.status = this.value22 === '99' ? '' : this.value22;
				obj.audit_status = this.value25 === '99' ? '' : this.value25;															
				this.$axiosGet('/mall-admin/check/promlist.json', obj, true).then(res => {
					if(res.code === 200) {
						this.loading22 = false;
						this.tableData22 = res;																		
					} else if(res.code === 404) {
						this.loading22 = false;
						this.tableData22 = '';
					}
				})
			},
			//查询
			querys22() {
				this.loading22 = true;
				this.page22 = 1;
				this.pageSize22 = 5;				
				this.lists2();

			},
			//清空
			clear22(){
				this.input22 = this.value22 = this.value25 = '';
				this.page22 = 1;
				this.pageSize22 = 5;
			},
			//键盘查询
			enters22(val) {
				if(val.keyCode === 13) {
					this.querys22();
				}
			},
			//详情
			goDetail22(obj) {	
				//console.log(obj);							
				this.disable1_22 = this.disable2_22 = this.disable3_22 = false;
				this.checkList_22 = [];
				this.datas_22 = obj;				
				this.dialogVisible_22 = true;
				if(obj.prom_data){
					this.prom_data = obj.prom_data;
				}					
				this.value4_22 = obj.audit_status;	
				this.input4_22 = obj.audit_msg;
				this.disable1_22 = true;
				this.disable3_22 = true;
				this.checkList_22 = ['3'];												
			},
			handleSizeChange22(val) {
				this.loading22 = true;
				this.pageSize22 = val;
				this.lists2();
			},
			handleCurrentChange22(val) {
				this.loading22 = true;
				this.page22 = val;
				this.lists2();
			},
			//放大
			enlarge(id) {				
				this.isMask = true;
				this.imgIndex = id;
			},
			//关闭阴影
			closeMask() {
				this.isMask = false;
			},
			//滚轮控制放大缩小
			larger() {
				let ev = window.event;
				let oImg = document.querySelector('.mask_img');
				if(ev.deltaY > 0) { //向下滚  缩小
					this.scaleNum--;
					if(this.scaleNum <= 1) {
						this.scaleNum = 1;
					}
					oImg.style.transform = 'scale(' + this.scaleNum + ')';
				} else { //向上滚  放大
					this.scaleNum++;
					if(this.scaleNum >= 5) {
						this.scaleNum = 5;
					}
					oImg.style.transform = 'scale(' + this.scaleNum + ')';
				}
			},
			submits_22() {				
				if(!this.flagss_22) {
					return;
				}				
				let self = this;
				let obj = {};				
				obj.id = this.datas_22.id;
				obj.audit_status = this.value4_22;
				obj.audit_msg = this.input4_22;
				obj.push_type = this.checkList_22;
				//console.log(obj);return;
				this.$axiosPost('/mall-admin/check/marketPromAudit.json?uid='+getCookie('UID')+'&token='+getCookie('TOKEN'), obj, true).then(res => {
					this.flagss_22 = false;
					if(res.code === 200){
						self.clear22();
						self.lists2();
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
						setTimeout(() => {
							self.flagss_22 = true;
							self.dialogVisible_22 = false;
						}, 1500);
					}else if(res.code === 404) {
						this.$message({
							type: 'info',
							message: '该条已审核通过,无需重复提交'
						});
						setTimeout(() => {
							self.flagss_22 = true;
							self.dialogVisible_22 = false;
						}, 1500);
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.seck {	
		.mask {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			background: #000;			
			z-index: 9999;
			display: flex;
			justify-content: center;
			align-items: center;
			p {
				position: absolute;
				left: 50%;
				top: 10px;
				transform: translateX(-50%);
				font-size: 22px;
				color: #fff;
			}
			.mask_img {
				width: 220px;
			}
		}	
		.nav_title {
			display: flex;
			align-items: center;
			padding: 20px 0 12px 25px;
			border-bottom: 1px solid #f4f4f4;
			h1 {
				font-size: 20px;
				color: #000;
			}
			p {
				font-size: 16px;
				color: #929292;
				margin-left: 6px;
			}
		}
		.border_right {
			width: 93.71%;
			margin: 18px auto;
			.conditions {				
				background: #e8e8e8;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 10px 0;
				.condition1 {
					display: flex;
					align-items: center;
					p {
						font-size: 15px;
						color: #000;
						margin-right: 6px;
						white-space: nowrap;
					}
					input {
						width: 226px;
						height: 24px;
						font-size: 15px;
						color: #000;
						padding: 0 10px;
					}					
				}	
				button {
					width: 90px;
					height: 28px;
					line-height: 28px;
					background: #6296ea;
					font-size: 16px;
					color: #fff;
					border-radius: 5px;					
				}			
			}			
			.data_lists {				
				padding: 20px 0;
				height: 540px;
				overflow: auto;
				.titles{
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.pages {
				text-align: right;
				padding: 0 20px;
			}
		}
		.show_detail {
			.d_header {
				width: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 35px;
				h2 {
					font-size: 19px;
					color: #000;
				}
				>div {
					display: flex;
					p {
						font-size: 12px;
						color: #585858;
						margin-left: 24px;
					}
				}
			}
			.d_tables {
				table {
					width: 91.7%;
					margin: 0 auto;
					th {
						width: 50%;
						height: 30px;
						background: #ddf0fe;
					}
					td {
						width: 25%;
						height: 58px;	
						padding: 0 10px;										
					}									
				}
				.common1 {
					font-size: 10px;
					color: #7f7f7f;
				}
				.common2 {
					font-size: 14px;
					color: #000;
					font-weight: 700;
				}
				.imgS {
					width: 40px;
					cursor: pointer;
				}
			}
			.d_footer {
				height: 212px;
				background: #535353;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 15px;
				.d_footer_1 {
					width: 0;
					font-size: 18px;
					color: #fff;
					margin: 0 45px;
				}
				.d_footer_2 {
					display: flex;
					flex-direction: column;
					select {
						width: auto;
						height: 41px;
						background: #535353;
						font-size: 24px;
						color: #fff;
						padding: 0 40px 0 60px;
					}
					textarea {
						outline: none;
						background: #535353;
						width: 256px;
						height: 126px;
						font-size: 14px;
						color: #fff;
						padding: 10px;
						margin-top: 10px;
					}
				}
				.d_footer_3 {
					display: flex;
					flex-direction: column;
					h3 {
						font-size: 23px;
						color: #fff;
						font-weight: 400;
						margin-bottom: 10px;
					}
				}
				.d_footer_4 {
					button {
						width: 172px;
						height: 42px;
						line-height: 42px;
						background: #34cf95;
						font-size: 20px;
						color: #fff;
					}
				}
			}
		}
	}
</style>